<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <!--<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />-->
    <title>乡土味土</title>
    <link type="text/css" href="__PUBLIC__/New/layer_mobile/need/layer.css" rel="stylesheet" />
    <link type="text/css" href="__PUBLIC__/New/css/cityPicker.css" rel="stylesheet" />
    <link type="text/css" href="__PUBLIC__/New/css/index.css" rel="stylesheet" />
    <link type="text/css" href="__PUBLIC__/New/css/store_change.css" rel="stylesheet" />

    <!--地址选择栏 样式-->
    <link href="__PUBLIC__/Wx/css/layout.min.css" rel="stylesheet" />
    <link href="__PUBLIC__/Wx/css/scs.min.css" rel="stylesheet" />

    <script type="text/javascript" src="__PUBLIC__/New/js/Jquery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/New/js/Phone/phone.js"></script>
    <!--<script type="text/javascript" src="__PUBLIC__/New/js/City/cityPicker.js"></script>-->
    <script type="text/javascript" src="__PUBLIC__/New/layer_mobile/layer.js"></script>
    <!--<script type="text/javascript" src="__PUBLIC__/New/js/Food/food.js"></script>-->
    <!--<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=naCneH1RqhScelND8DCvA344DcYEWL9M"></script>-->
</head>
<style>
    .city input {
        max-width: 125px;
    }
    .cascade_scroll_selects .scs_container .scs_dialog {
        font-size: 20px;
        position: fixed;
    }
    .cascade_scroll_selects .scs_container .scs_dialog .scs_btns .scs_btn{
        height: 90px;
        line-height: 90px;
        font-size: 24px;
    }
    .cascade_scroll_selects .scs_container .scs_dialog .scs_selects_group_title{
        line-height: 50px;
        height: 50px;
    }
    .store-box{
        margin-bottom: 150px;
    }
</style>
<body>
    <header>
        <div class="change-header">
            <div class="top-adderss">
                <img src="__PUBLIC__/New/image/store_home.png" />
                <span>选择店铺</span>
            </div>
            <div class="adderss-change"><span>切换</span>
                <!--<a id="city_name" href="#">-->
                <a href="javascript:0;">
                    <img src="__PUBLIC__/New/image/map_icon.png" />
                    <div class="city">
                        <if condition="$datekey">
                            <input type="text" laceholder="" id="myAddrs" name="city" data-key="{$datekey.a_id_1}-{$datekey.a_id_2}-{$datekey.a_id_3}" value="<?= getarea($datekey['a_id_2']);?>"/>
                            <else />
                            <input type="text" laceholder="" id="myAddrs" name="city" data-key="408533-408534-409350" value="未选择"/>
                        </if>
                        <!--<input type="text" value="武汉" name="city" class="cities" onfocus="this.blur()" />-->
                        <i class="fa fa-angle-down"></i>
                    </div>
                    <!--<script type="text/javascript">-->
                   <!--/*  选择城市的方法见"/js/City/cityPicker"202行 */-->
                        <!--$(".cities").CityPicker();-->
                    <!--</script>-->
                </a>
            </div>
        </div>
    </header>
   <!--  content -->
   <div class="store-br">
        <!--<img src="__PUBLIC__/New/image/top_br.png" />-->
        <img src="__PUBLIC__/New/image/banner.jpg" />
   </div>
   <div class="store-box" style="margin-top:0px;">
       <div class="area-name">
            <img src="__PUBLIC__/New/image/adderss_icon.png" />
            <span><if condition="$datekey"><?=getarea($datekey["a_id_3"]);?><else />未选择</if></span>
       </div>
       <volist name="c_info" id="vo">
           <div class="detail-name" onclick="edit_community({$vo.id})">
                 <span>{$vo.title}</span>
                <div class="detail-adderss">
                    {$vo.storename}
                </div>
           </div>
       </volist>
   </div>
   <!--<div class="store-box">-->
         <!--<div class="detail-name">-->
               <!--<span>外滩棕榈泉店</span> -->
              <!--<div class="detail-adderss">-->
                   <!--沿江大道229号-->
              <!--</div>-->
         <!--</div>-->
    <!--</div>-->
    <!--footer-->
    <include file="Public:New_footer" />
    <!--footer end-->
    <script src="__PUBLIC__/Wx/js/jquery.min.js"></script>
    <script src="__PUBLIC__/Wx/js/jquery.scs.min.js"></script>
    <script src="__PUBLIC__/js/layer/layer.js"></script>
    <script>
        //修改地址
        function edit_community(c_id){
            $.post("__MODULE__/Index/EditCommunity",{c_id:c_id},function (d) {
                if(d.state==0) {
                    layer.msg(d.val, {icon:1,time:1000}, function(){
                        window.location.href=d.url;
                    });
                }else{
                    layer.msg(d.val, {icon:2,time:1000});
                }
            })
        }//end fun
    </script>
    <script>
        var addr_arr=new Array;

        {$ali}

        $(function() {
            /**
             * 通过数组id获取地址列表数组
             *
             * @param {Number} id
             * @return {Array}
             */
            function getAddrsArrayById(id) {
                var results = [];
                if (addr_arr[id] != undefined)
                    addr_arr[id].forEach(function(subArr) {
                        results.push({
                            key: subArr[0],
                            val: subArr[1]
                        });
                    });
                else {
                    return;
                }
                return results;
            }
            /**
             * 通过开始的key获取开始时应该选中开始数组中哪个元素
             *
             * @param {Array} StartArr
             * @param {Number|String} key
             * @return {Number}
             */
            function getStartIndexByKeyFromStartArr(startArr, key) {
                var result = 0;
                if (startArr != undefined)
                    startArr.forEach(function(obj, index) {
                        if (obj.key == key) {
                            result = index;
                            return false;
                        }
                    });
                return result;
            }

            //bind the click event for 'input' element
            $("#myAddrs").click(function() {
                document.activeElement.blur();//让下面键盘不弹出
                var PROVINCES = [],
                    startCities = [],
                    startDists = [];
                //Province data，shall never change.
                addr_arr[0].forEach(function(prov) {
                    PROVINCES.push({
                        key: prov[0],
                        val: prov[1]
                    });//alert(prov[0]);alert(prov[1]);//省的id和名称
                });
                //init other data.
                var $input = $(this),
                    dataKey = $input.attr("data-key"),
                    provKey = 408533, //default province 湖北省
                    cityKey = 408534, //default city 武汉市
                    distKey = 409096, //default district 武昌区
                    distStartIndex = 0, //default 0
                    cityStartIndex = 0, //default 0
                    provStartIndex = 0; //default 0
                //alert($input); //对象
                if (dataKey != "" && dataKey != undefined) {
                    var sArr = dataKey.split("-");//alert(sArr);
                    if (sArr.length == 3) {
                        provKey = sArr[0];
                        cityKey = sArr[1];
                        distKey = sArr[2];

                    } else if (sArr.length == 2) { //such as 台湾，香港 and the like.
                        provKey = sArr[0];
                        cityKey = sArr[1];
                    }
                    startCities = getAddrsArrayById(provKey);
                    startDists = getAddrsArrayById(cityKey);
                    provStartIndex = getStartIndexByKeyFromStartArr(PROVINCES, provKey);
                    cityStartIndex = getStartIndexByKeyFromStartArr(startCities, cityKey);
                    distStartIndex = getStartIndexByKeyFromStartArr(startDists, distKey);
                }
                //3 scrollers, and the title and id will be as follows:
                //上面的注释如果写在{后会造成无法显示省，可能是js解释程序无法过滤干净造成的bug，不是第一次遇到了
                var navArr = [{
                    title: "省",
                    id: "scs_items_prov"
                }, {
                    title: "市",
                    id: "scs_items_city"
                }, {
                    title: "区",
                    id: "scs_items_dist"
                }];
                SCS.init({
                    navArr: navArr,
                    onOk: function(selectedKey, selectedValue) {
                        //输出地址
                        var city = selectedValue.split(" ");
                        // console.log(selectedKey);
                        $input.val(city[1]).attr("data-key", selectedKey);
                        $.post("__MODULE__/Index/change",{datekey:selectedKey},function (date) {
                            var div = $(date).find(".area-name,.detail-name");//获取接收的html页面中的选择部分
                            $(".store-box").html(div);//替换掉对应html内容
                        });
                    }
                });
                var distScroller = new SCS.scrollCascadeSelect({
                    el: "#" + navArr[2].id,
                    dataArr: startDists,
                    startIndex: distStartIndex
                });
                var cityScroller = new SCS.scrollCascadeSelect({
                    el: "#" + navArr[1].id,
                    dataArr: startCities,
                    startIndex: cityStartIndex,
                    onChange: function(selectedItem, selectedIndex) {
                        distScroller.render(getAddrsArrayById(selectedItem.key), 0); //re-render distScroller when cityScroller change
                    }
                });
                var provScroller = new SCS.scrollCascadeSelect({
                    el: "#" + navArr[0].id,
                    dataArr: PROVINCES,
                    startIndex: provStartIndex,
                    onChange: function(selectedItem, selectedIndex) { //re-render both cityScroller and distScroller when provScroller change
                        cityScroller.render(getAddrsArrayById(selectedItem.key), 0);
                        distScroller.render(getAddrsArrayById(cityScroller.getSelectedItem().key), 0);
                    }
                });

            });
        });
    </script>
</body>

</html>